<template>
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="../assets/潮品分享1.png"> <div class="buy">立即抢购></div></div>
        <div class="swiper-slide"><img src="../assets/潮品分享2.png"> <div class="buy">立即抢购></div></div>
        <div class="swiper-slide"><img src="../assets/潮品分享3.png"> <div class="buy">立即抢购></div></div>
        <div class="swiper-slide"><img src="../assets/潮品分享4.png"> <div class="buy">立即抢购></div></div>
        <div class="swiper-slide"><img src="../assets/潮品分享5.png"> <div class="buy">立即抢购></div></div>
        <div class="swiper-slide"><img src="../assets/潮品分享6.png"> <div class="buy">立即抢购></div></div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>
</div>
</template>
<script>
import Swiper from "swiper";
import "swiper/css/swiper.css";
export default {
 mounted(){
    new Swiper ('.swiper-container', {
    // direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
        neme:"app",
        data(){
            return {};
        },
      el: '.swiper-scrollbar',
    },
  })        
}   
}

</script>
<style scoped>
/* @import url(swiper/css/swiper.css); */
.swiper-container{
    width: 100%;
    height: 1.85rem;
    background-color: #00aadd;
}
img{
    width: 3.4rem;
    height: 1.63rem;
    border-radius: 4px;
}
.swiper-wrapper{
    margin-left: 10px;
    position: relative;
    bottom: -0.3rem;
}
.buy{
    width: 0.77rem;
    height: 0.24rem;
    background-color: #06b8ff;
    color: #fff;
    font-size: 0.1rem;
    text-align: center;
    line-height: 0.24rem;
    border: 0.01rem solid white;
    border-top-left-radius: 0.27rem;
    border-top-right-radius: 0.27rem;
    border-bottom-left-radius: 0.27rem;
    border-bottom-right-radius: 0.27rem;
    position: absolute;
    left: 0.05rem;
    bottom: 0.3rem;
}
</style>


